<template>
    <div>
        <el-tree
                ref="treeData"
                :props="props"
                :load="loadNode"
                :data="treeData"
                node-key="id"
                :check-strictly="true"
                lazy
                :default-expanded-keys="defaultExpandedKeysArray"
                :default-checked-keys="defaultSelectCids"
                show-checkbox
                @node-click="handleNodeClick"
                @check-change="handleCheckChange">
        </el-tree><!--    -->

      <h5>手动获取</h5>
      <el-tree :data="treeData1"
               show-checkbox
               default-expand-all
               node-key="id"
               ref="tree"
               highlight-current
               :props="defaultProps"
               :check-strictly="true"
               :expand-on-click-node="false"
               :check-on-click-node="false"
               @check="handleCheckChange">
        <div slot-scope="{ node, data }" class="eltree-node-ellipsis" style="width: 100%">
          <el-tooltip class="item" effect="dark" :content="data.name" placement="top">
            <span> {{ data.name }} （{{ data.code }}）</span>
          </el-tooltip>
        </div>
      </el-tree>

    </div>
</template>

<script>
export default {
    data() {
        return {
            //------------懒加载相关---------
            maps: new Map(),
            treeData: [],
            props: {
                label: 'name',
                children: 'zones'
            },
            count: 5,
            num: 2,
            level: 5,
            defaultSelectCids: [4],
             defaultExpandedKeysArray:[1,2,7],
            firstNode:{},
            childNode:{},
            clickCount:0,
            treeData1: [{
            "id": "1690551371155525634",
            "createUser": "1689956207619551234",
            "createDept": "1665902564934033410",
            "createTime": "2023-08-13 10:30:30",
            "updateUser": "1689956207619551234",
            "updateTime": "2023-08-13 10:30:30",
            "status": 1,
            "isDeleted": 0,
            "projectId": "1690551316231114754",
            "projectCode": "T00000001",
            "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
            "code": "T00000001",
            "name": "中国石油-吉林石化-转型升级项目-测试项目1",
            "responsibilityId": "1665902564934033410",
            "responsibilityName": "",
            "type": 0,
            "wfDetail": "",
            "remarks": "",
            "isEnable": 1,
            "processNo": "",
            "projectDivideApproverStatus": "",
            "processNoChange": "",
            "projectDivideChangeApproverStatus": "",
            "parentId": 0,
            "parentName": "",
            "fullPath": "1690551371155525634",
            "pobsId": "",
            "qualitySupervisionId": "",
            "projectManagementUnit": "",
            "supervisionId": "",
            "deviseId": "",
            "epcId": "",
            "consultingUnit": "",
            "surveyUnit": "",
            "constructionId": "",
            "testingId": "",
            "supervisionUnit": "",
            "deviseUnit": "",
            "constructionUnit": "",
            "testingUnit": "",
            "epcUnit": "",
            "children": [{
              "id": "1690552892484112386",
              "createUser": "1690317768414793730",
              "createDept": "1665902564934033410",
              "createTime": "2023-08-13 10:36:33",
              "updateUser": "1672860091587043329",
              "updateTime": "2023-08-13 16:52:44",
              "status": 1,
              "isDeleted": 0,
              "projectId": "1690551316231114754",
              "projectCode": "T00000001",
              "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
              "code": "T000000012",
              "name": "附属装置",
              "responsibilityId": "",
              "responsibilityName": "",
              "type": 1,
              "wfDetail": "",
              "remarks": "",
              "isEnable": 1,
              "processNo": "6feb88a3-39b3-11ee-af01-0aafd99d2e5e",
              "projectDivideApproverStatus": "3",
              "processNoChange": "",
              "projectDivideChangeApproverStatus": "",
              "parentId": "1690551371155525634",
              "parentName": "中国石油-吉林石化-转型升级项目-测试项目1",
              "fullPath": "1690551371155525634,1690552892484112386",
              "pobsId": "",
              "qualitySupervisionId": "",
              "projectManagementUnit": "",
              "supervisionId": "",
              "deviseId": "",
              "epcId": "",
              "consultingUnit": "",
              "surveyUnit": "",
              "constructionId": "",
              "testingId": "",
              "supervisionUnit": "",
              "deviseUnit": "",
              "constructionUnit": "",
              "testingUnit": "",
              "epcUnit": "",
              "children": [{
                "id": "1690628109634002946",
                "createUser": "1690617587289653249",
                "createDept": "-1",
                "createTime": "2023-08-13 15:35:26",
                "updateUser": "1672860091587043329",
                "updateTime": "2023-08-13 16:52:44",
                "status": 1,
                "isDeleted": 0,
                "projectId": "1690551316231114754",
                "projectCode": "T00000001",
                "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
                "code": "T0000000121",
                "name": "管线",
                "responsibilityId": "",
                "responsibilityName": "",
                "type": 2,
                "wfDetail": "",
                "remarks": "",
                "isEnable": 1,
                "processNo": "6feb88a3-39b3-11ee-af01-0aafd99d2e5e",
                "projectDivideApproverStatus": "3",
                "processNoChange": "",
                "projectDivideChangeApproverStatus": "",
                "parentId": "1690552892484112386",
                "parentName": "附属装置",
                "fullPath": "1690551371155525634,1690552892484112386,1690628109634002946",
                "pobsId": "",
                "qualitySupervisionId": "",
                "projectManagementUnit": "",
                "supervisionId": "",
                "deviseId": "",
                "epcId": "",
                "consultingUnit": "",
                "surveyUnit": "",
                "constructionId": "",
                "testingId": "",
                "supervisionUnit": "",
                "deviseUnit": "",
                "constructionUnit": "",
                "testingUnit": "",
                "epcUnit": "",
                "hasChildren": false,
                "isClick": false,
                "isInDM": false
              },
                {
                  "id": "1690628183743160321",
                  "createUser": "1690617587289653249",
                  "createDept": "-1",
                  "createTime": "2023-08-13 15:35:44",
                  "updateUser": "1672860091587043329",
                  "updateTime": "2023-08-13 16:52:44",
                  "status": 1,
                  "isDeleted": 0,
                  "projectId": "1690551316231114754",
                  "projectCode": "T00000001",
                  "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
                  "code": "T0000000122",
                  "name": "仓库",
                  "responsibilityId": "",
                  "responsibilityName": "",
                  "type": 2,
                  "wfDetail": "",
                  "remarks": "",
                  "isEnable": 1,
                  "processNo": "6feb88a3-39b3-11ee-af01-0aafd99d2e5e",
                  "projectDivideApproverStatus": "3",
                  "processNoChange": "",
                  "projectDivideChangeApproverStatus": "",
                  "parentId": "1690552892484112386",
                  "parentName": "附属装置",
                  "fullPath": "1690551371155525634,1690552892484112386,1690628183743160321",
                  "pobsId": "",
                  "qualitySupervisionId": "",
                  "projectManagementUnit": "",
                  "supervisionId": "",
                  "deviseId": "",
                  "epcId": "",
                  "consultingUnit": "",
                  "surveyUnit": "",
                  "constructionId": "",
                  "testingId": "",
                  "supervisionUnit": "",
                  "deviseUnit": "",
                  "constructionUnit": "",
                  "testingUnit": "",
                  "epcUnit": "",
                  "hasChildren": false,
                  "isClick": false,
                  "isInDM": false
                }
              ],
              "hasChildren": false,
              "isClick": false,
              "isInDM": false
            },
              {
                "id": "1690961588038615041",
                "createUser": "1690317768414793730",
                "createDept": "1665902564934033410",
                "createTime": "2023-08-14 13:40:34",
                "updateUser": "1672860091587043329",
                "updateTime": "2023-08-14 14:44:50",
                "status": 1,
                "isDeleted": 0,
                "projectId": "1690551316231114754",
                "projectCode": "T00000001",
                "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
                "code": "T000000013",
                "name": "装置-1",
                "responsibilityId": "",
                "responsibilityName": "",
                "type": 1,
                "wfDetail": "",
                "remarks": "",
                "isEnable": 1,
                "processNo": "e97a0c1c-3a6d-11ee-a802-dec190691bf2",
                "projectDivideApproverStatus": "3",
                "processNoChange": "",
                "projectDivideChangeApproverStatus": "",
                "parentId": "1690551371155525634",
                "parentName": "中国石油-吉林石化-转型升级项目-测试项目1",
                "fullPath": "1690551371155525634,1690961588038615041",
                "pobsId": "",
                "qualitySupervisionId": "",
                "projectManagementUnit": "",
                "supervisionId": "",
                "deviseId": "",
                "epcId": "",
                "consultingUnit": "",
                "surveyUnit": "",
                "constructionId": "",
                "testingId": "",
                "supervisionUnit": "",
                "deviseUnit": "",
                "constructionUnit": "",
                "testingUnit": "",
                "epcUnit": "",
                "children": [{
                  "id": "1690977276203581441",
                  "createUser": "1690965251487268865",
                  "createDept": "1690964560056254465",
                  "createTime": "2023-08-14 14:42:54",
                  "updateUser": "1672860091587043329",
                  "updateTime": "2023-08-14 14:44:50",
                  "status": 1,
                  "isDeleted": 0,
                  "projectId": "1690551316231114754",
                  "projectCode": "T00000001",
                  "projectName": "中国石油-吉林石化-转型升级项目-测试项目1",
                  "code": "T0000000131",
                  "name": "管线",
                  "responsibilityId": "",
                  "responsibilityName": "",
                  "type": 2,
                  "wfDetail": "",
                  "remarks": "",
                  "isEnable": 1,
                  "processNo": "e97a0c1c-3a6d-11ee-a802-dec190691bf2",
                  "projectDivideApproverStatus": "3",
                  "processNoChange": "",
                  "projectDivideChangeApproverStatus": "",
                  "parentId": "1690961588038615041",
                  "parentName": "装置-1",
                  "fullPath": "1690551371155525634,1690961588038615041,1690977276203581441",
                  "pobsId": "",
                  "qualitySupervisionId": "",
                  "projectManagementUnit": "",
                  "supervisionId": "",
                  "deviseId": "",
                  "epcId": "",
                  "consultingUnit": "",
                  "surveyUnit": "",
                  "constructionId": "",
                  "testingId": "",
                  "supervisionUnit": "",
                  "deviseUnit": "",
                  "constructionUnit": "",
                  "testingUnit": "",
                  "epcUnit": "",
                  "hasChildren": false,
                  "isClick": false,
                  "isInDM": false
                }],
                "hasChildren": false,
                "isClick": false,
                "isInDM": false
              }
            ],
            "hasChildren": false,
            "isClick": false,
            "isInDM": false
          }],
            defaultProps:{
              disabled: function(data, node) {
                if (data.type == 2) {
                  return true
                }
              }
            }
        };
    },
    methods: {
        handleCheckChange(nodeData, todo,count) { //count标识是否是被勾的节点

            if (!count){//第一次进来的node
                this.clickCount ++
                this.firstNode = this.$refs['treeData'].getNode(nodeData.id) ;
            }

            if (this.clickCount === 2){
                 return ;
            }

            const node = this.$refs['treeData'].getNode(nodeData.id) ;
           // console.log("nodeData, node,todo,count:",nodeData,node,todo,count)
            if (todo === undefined) {
                todo = !node.checked
            }
            this.$refs['treeData'].setChecked(node, todo, true)
            console.log("firstNode:",this.firstNode)
            if (count === '1'){
                if (this.firstNode.checked){
                    node.data.disabled = true ;
                }else{
                    node.data.disabled =  false;
                }
                //修复子节点有选中状态，会有反选的bug
                if(node.parent.data.disabled){
                    node.data.disabled = true;
                }
            }
            if (node.childNodes && node.childNodes.length) {
                node.childNodes.forEach(childNode => {
                    // if (this.clickCount === 1){
                         this.handleCheckChange(childNode.data, false,'1')
                     // }else{
                     //     this.clickCount = 0
                     // }
                })
            }
        },
       /* handleCheckChange(nodeData, ifCheck, ifHasCheckChild){
           //console.log(nodeData, ifCheck, ifHasCheckChild)
            const node = this.$refs['treeData'].getNode(nodeData.id) ;
           // console.log("*******node:", node);
            let _this = this ;
            debugger
            if (!ifCheck) {//去掉时连带把子节点都去掉，不关联父节点 ifCheck false
                if (node.childNodes && node.childNodes.length) {
                    node.childNodes.forEach(childNode => {
                        //console.log("childNode",childNode)
                        _this.$refs['treeData'].setChecked(childNode, false, false)
                        _this.$set(childNode.data,'disabled',false)

                        //this.handleCheckChange(childNode, false, false)
                        //this.$set(childNode,'checked',ifCheck)
                        // this.$set(childNode.data,'disabled',ifCheck)
                    })
                }
            }else{ //ifCheck true
                if (node.childNodes && node.childNodes.length) {
                    node.childNodes.forEach(childNode => {
                        //console.log("childNode",childNode)
                        _this.$refs['treeData'].setChecked(childNode, false, false)
                        _this.$set(childNode.data,'disabled',true)
                        //this.$set(childNode,'checked',ifCheck)
                        // this.$set(childNode.data,'disabled',ifCheck)
                    })
                }
            }
            // else {//选中的时候，如果父节点没有选中，递归选中
            //     if (nodeData.level !== 1) {
            //         let curNode =  this.$refs['treeData'].getNode(nodeData.id);
            //         console.log("curNode.parent:",curNode.parent.data.id)
            //         let parentNode = this.$refs['treeData'].getNode(curNode.parent.data.id)
            //         console.log("parentNode",parentNode)
            //         if (parentNode && !parentNode.checked) {
            //             this.$refs['treeData'].setChecked(parentNode, true, false)
            //         }
            //     }
            // }
        },*/
       /* handleCheckChange(data, checked, indeterminate) {
            const node = this.$refs['treeData'].getNode(data.id) ;
            console.log("*******node:", node);
            // this.$set(node, "checked", true)
           this.doCheckChild(node,checked)
            // if (node) { // 此处应判断当前节点的checked属性是否为true，是则不必半选
            //     node.indeterminate = true
            // }
            // let node = this.maps.get(data.id);
            // this.doCheckChild(node)
            // console.log("node:", node)
        },*/
        /**
         * 如果当前节点状态为选中，递归去掉所有子节点选中状态
         * 如果为未选中，递归加上所有子节点选中状态
         * @param data
         */
        doCheckChild(node, todo) {
            console.log("node.childNodes:", node)
            //debugger
            if (todo === undefined) {
                todo = !node.checked
            }

            //this.$refs['treeData'].setChecked(node, todo, true)
            this.$set(node.data, "disabled", true)
            this.$set(node, "checked", !node.checked)

            if (node.childNodes && node.childNodes.length) {
                node.childNodes.forEach(childNode => {
                    this.$set(childNode,'checked',true)
                    this.$set(childNode.data,'disabled',!node.checked)
                    this.doCheckChild(childNode, todo)
                })
            }
        },
        handleNodeClick(data) {
            this.$refs.treeData.getCheckedNodes();
            console.log("treeData:", this.treeData, 'data:', data);
        },
        loadNode(node, resolve) {
            console.log("node:", node)
            let flag = ''
            if (node.checked || node.data.disabled){
                flag = true
            }


            this.level++
            if (node.level === 0) {
                //  this.$refs.treeData.updateKeyChildren(node.data.id, [{id:'3', name: 'region3' }, { id:'21',name: 'region21' }]);
                return resolve([{id: '1', name: 'region1', disabled: flag}, {
                    id: '20',
                    name: 'region2',
                    disabled: flag
                }]);
            }
            if (node.level > 3) return resolve([]);
            var hasChild;
            if (node.data.name === 'region1') {
                hasChild = true;
            } else if (node.data.name === 'region2') {
                hasChild = false;
            } else {
                hasChild = this.level > 5;
            }

            setTimeout(() => {
                var data;
                let num = this.num++
                if (hasChild) {
                    data = [{
                        id: num,
                        name: 'zone' + (this.count++),
                        disabled:flag
                    }, {
                        id: num + 5,
                        name: 'zone' + (this.count++),
                        disabled:flag

                    }];
                } else {
                    data = [];
                }
                //console.log("data:", data)
                resolve(data);
                this.maps.set(node.data.id, {node, resolve});
                //console.log("this.maps:", this.maps)
            }, 500);
        }
    }
};
</script>